<template>
    <div style="margin-top:30px">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                    <el-row>
                    <el-col :span="24">
                    <div class="grid-content bg-purple">
                        <el-form-item label="所属机构" prop="groupCode" style="margin-right:15px">
                        <el-select v-model="form.groupCode" placeholder="请选择机构" clearable style="width: 100%">
                            <el-option
                            v-for="item in partyGroup"
                            :key="item.code"
                            :label="item.groupName"
                            :value="item.code"
                            />
                        </el-select>
                        </el-form-item>
                    </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-form-item label="力别" prop="name" style="margin-right:15px">
                                <el-input v-model="form.name" placeholder="请输入力别" />
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-form-item label="记件单价" prop="unitPrice" style="margin-right:15px">
                                <el-input v-model="form.unitPrice" placeholder="请输入记件单价" />
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-form-item label="备注" prop="remarks" style="margin-right:15px">
                                <el-input v-model="form.remarks" placeholder="请输入备注" />
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="funcCancel">取 消</el-button>
            <el-button type="primary" @click="funcSubmit" :disabled="isDisable">确 定</el-button>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue'
    import 'xe-utils'
    import VXETable from 'vxe-table'
    import 'vxe-table/lib/index.css'
    import request from '@/utils/request'
    Vue.use(VXETable)
    export default {
        name: 'forceTypeAdd',
        data() {
            return {
                isDisable:false,

                form: {
                    code: '',
                    name: '',
                    unitPrice: '',
                    remarks: '',
                    status: '',
                    groupCode: '',
                    partyGroupCode:'',
                },
                      partyGroup:[],

                rules: {
                  groupCode: [
                        { required: true, message: '请选择所属机构', trigger: 'blur' }
                    ],

                    code: [
                        { required: true, message: '请输入编码', trigger: 'blur' },

                    ],
                    name: [
                        { required: true, message: '请输入力别', trigger: 'blur' },

                    ],
                    unitPrice: [
                        { required: true, message: '请输入记件单价', trigger: 'blur' },
                    ],
                }
            }
        },
        created() {},
        methods: {
            // 重置
            reset(){
                // this.$refs.partyGroupSelect.setSelectValue('')              
                this.$refs['form'].resetFields()
            },

            //提交
            funcSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.isDisable = true

                        const data = this.form
                        request({ url: '/ntocc-wms-api/forceType', method: 'post', params: data }).then(response => {
                            this.$message({ message: response.msg, type: 'success' })
                            this.$emit('fatherAddMethod')
                            this.isDisable = false

                        }).then(()=> {
                            this.$refs.partyGroupSelect.setSelectValue('')              
                            this.$refs['form'].resetFields()
                            }).catch(() => this.isDisable = false)

                    } else {
                        return false;
                    }
                });
            },
            //取消
            funcCancel() {
                this.$emit('fatherCancelMethod','add')
            }
        }
    }
</script>
<style lang="scss" scoped>
    .dialog-footer {
        margin:15px 0 15px 0;
        width: 175px;
        float: right;
    }
</style>
